<template>
  <div class="r-l-c-page">
    <!-- <div class="video-bg">
      <video src="./image/test.mp4" autoplay muted style="width:100vw;height:100vh;"></video>
    </div> -->
    <div class="page-container">
      <div class="head fss">
        <img
          src="./image/logo.png"
          style="width:214px;height:38px;margin:35px 0 0 24px;"
        >
        <h1 class="head-name">设备资产盘点信息化平台</h1>
        <!-- <div class="timer"> {{timer}}
          <v-icon
            color="#fff"
            @click="requestFullscreen"
          >fullscreen</v-icon>
        </div> -->
        <div style="margin:35px 24px 0 0;">
          <dropdown
            @change="change"
            @search="search"
          />
        </div>
      </div>
      <div class="content">
        <div class="box-l row1">
          <box1
            :datas="list1"
            :moneyFormat="moneyFormat"
          >
          </box1>
        </div>
        <div class="box-c np row1">
          <box2
            :datas="list2"
            :moneyFormat="moneyFormat"
          >
          </box2>
        </div>
        <div class="box-r row1">
          <box3
            :datas="list3"
            :moneyFormat="moneyFormat"
          ></box3>
        </div>

        <div class="box-l row2">
          <box4 ref="box4" :chooseBatch="chooseBatch"></box4>
        </div>
        <div class="box-c box border2 row2">
          <box5
            :chooseBatch="chooseBatch"
            :moneyFormat="moneyFormat"
          ></box5>
        </div>
        <div class="box-r row2">
          <box6 ref="box6" :chooseBatch="chooseBatch"></box6>
        </div>

        <div class="box-l row3">
          <box7
            ref="box7"
            :chooseBatch="chooseBatch"
            :moneyFormat="moneyFormat"
          ></box7>
        </div>
        <div class="box-c box border2 row3">
          <box8 ref="box8" :chooseBatch="chooseBatch"></box8>
        </div>
        <div class="box-r row3">
          <box9 ref="box9" :chooseBatch="chooseBatch"></box9>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
var zoom = 1;

function debounce(fn,delay){
  let time=null
  return function(){
    if(time){
      clearTimeout(time)
      time=null
    }
    time=setTimeout(fn,delay)
  }
}

function match() {
  let w = document.body.clientWidth;
  w = w > 1200 ? w : 1200;
  zoom = w < 1920 ? w / 1920.0 : 1920.0 / w;
  document.getElementsByClassName("page")[0].style.zoom = zoom;
}
window.onload = match;
window.addEventListener("resize", match);

import timerRange from "./timerRange.vue";
Vue.component("timerRange", timerRange);
import box1 from "./box1.vue";
import box2 from "./box2.vue";
import box3 from "./box3.vue";
import box4 from "./box4.vue";
import box5 from "./box5.vue";
import box6 from "./box6.vue";
import box7 from "./box7.vue";
import box8 from "./box8.vue";
import box9 from "./box9.vue";
import popup from "./popup.vue";
import dropdown from "./dropdown.vue";
import Vue from "vue";

export default {
  components: {
    box1,
    box2,
    box3,
    box4,
    box5,
    box6,
    box7,
    box8,
    box9,
    popup,
    dropdown,
  },
  data() {
    return {
      title: 0,
      timer: "",
      upperNumber: ["日", "一", "二", "三", "四", "五", "六"],
      charts: [],
      isFull: false,
      chooseBatch: "",
      list1: [],
      list2: [],
      list3: [],
    };
  },

  methods: {
    //加0
    fill(n) {
      return (n = n >= 10 ? n : "0" + n);
    },
    moneyFormat(n) {
      if (!n) return 0;
      const str = n.toString();
      let list = [str.split(".")[0]];
      const reg = /(?!\b)(?=(\d{3})+$)/g;
      return n ? list[0].replace(reg, ",") + (list[1] ? "." + list[1] : "") : 0;
    },
    setTimer() {
      const fill = this.fill;
      let time = new Date();
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      let d = time.getDate();
      let h = time.getHours();
      let mm = time.getMinutes();
      let s = time.getSeconds();
      let w = time.getDay();
      this.timer = `${y}年${fill(m)}月${fill(d)}日 ${fill(h)}:${fill(
        mm
      )}:${fill(s)}     ${"星期" + this.upperNumber[w]}`;
      // console.log(this.timer)
    },
    match() {
      let charts = [
        "echart1",
        "echart3",
        "echart3_1",
        "echart4",
        "echart6",
        "echart6_1",
      ];
      this.chartsDom = charts.map((c) => document.getElementById(c));
      this.chartsDom.forEach((c) => {
        c.style.zoom = zoom;
        c.style.transform.scale = 1 / zoom;
      });
    },

    requestFullscreen() {
      if (this.isFull) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      } else {
        const docElm = document.documentElement;
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
        }
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    },
    change(e) {
      this.chooseBatch = e;
      this.getRowData();
    },
    getRowData() {
      if (this.chooseBatch) {
        this.$http
          .get(
            `/api/StocktakingAccountReport/StocktakingReportA/${
              this.chooseBatch || ""
            }`
          )
          .then((res) => {
            const {
              Amount1,
              Amount2,
              CountA,
              CountB,
              CountC,
              CountD,
              CountE,
              CountF,
              CountG,
              CountH,
            } = res;
            this.list1 = [CountA, CountB, CountC];
            this.list2 = [
              [Amount1, Amount2],
              [CountD, CountE, CountF],
            ];
            this.list3 = [CountG, CountH];
          });
      }
    },
    search() {
      const childs = this.$children;

      childs.slice(4).forEach((i) => i.getData && i.getData());
    },
    resize(){
       
      let boxs=[4,6,7,8,9]
      boxs.forEach(i=>{
        const box=this.$refs[`box${i}`]
         
        box.resize&&box.resize()
      })
       
      
    }
  },
  created() {
    setInterval(this.setTimer, 1000);
    this.getRowData();
  },
  mounted() {
    document.addEventListener("fullscreenchange", () => {
      const isFullScreen = document.fullscreenElement;
      this.isFull = !!isFullScreen;
    });
    window.onresize=debounce(this.resize,600)
  },
};
</script>

 

  <style lang="stylus">
  .page-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
  }

  .r-l-c-page {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(#102357, #020c25);

    .pa {
      position: absolute;
    }

    fss {
      display: flex;
    }

    .fcc {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .head {
      width: 100%;
      height: 73px;
      color: #fff;
      justify-content: space-between;
      align-items: center;
      // padding: 0 10px;
      background-image: url('./image/header.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      // border-bottom: 1px solid #009dff;
    }

    .head h1 {
      position: fixed;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 30px;
      height: 40px;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: 700;
      text-align: CENTER;
      line-height: 30px;
      letter-spacing: 0.54px;
    }

    .content {
      display: flex;
      /* justify-content: space-evenly; */
      flex-wrap: wrap;
    }

    .box-l {
      box-sizing: border-box;
      position: relative;
      width: 26vw;
      flex: 0 0 26vw;
      margin: 0 0 1vw 1vw;
      // padding: 10px;
      // border: 1px solid #fff;
      margin-left: calc((5vw / 4));
    }

    .box-c {
      box-sizing: border-box;
      position: relative;
      width: 46vw;
      flex: 0 0 46vw;
      margin: 0 0 1vw 1vw;
      // padding: 10px;
      // border: 1px solid #fff;
      margin-left: calc((5vw / 4));
    }

    .box-r {
      box-sizing: border-box;
      position: relative;
      width: 23vw;
      flex: 0 0 23vw;
      margin: 0 0 1vw 1vw;
      // padding: 10px;
      // border: 1px solid #fff;
      margin-left: calc((5vw / 4));
    }

    .box-l.row1, .box-c.row1, .box-r.row1 {
      height: 12vh;
      margin-top: 20px;
      margin-bottom: 18px;
    }

    .box-l.row2, .box-c.row2, .box-r.row2 {
      height: 40vh;
      margin-bottom: 16px;
    }

    .box-l.row3, .box-c.row3, .box-r.row3 {
      height: 35vh;
    }

    /* 背景 */
    .box-l.row1 {
      background-image: url('./image/box1.png');
      background-size: 100% 100%;
    }

    .box-r.row1 {
      background-image: url('./image/box3.png');
      background-size: 100% 100%;
    }

    .box-l.row2 {
      background-image: url('./image/box4.png');
      background-size: 100% 100%;
    }

    .box-c.row2 {
      background-image: url('./image/box5.png');
      background-size: 100% 100%;
    }

    .box-r.row2 {
      background-image: url('./image/box6.png');
      background-size: 100% 100%;
    }

    .box-l.row3 {
      background-image: url('./image/box7.png');
      background-size: 100% 100%;
    }

    .box-c.row3 {
      background-image: url('./image/box8.png');
      background-size: 100% 100%;
    }

    .box-r.row3 {
      background-image: url('./image/box9.png');
      background-size: 100% 100%;
    }

    .bg-same {
      background-size: 100% 100%;
    }

    .box-c.np {
      padding: 0;
    }

    .bx_bb {
      box-sizing: border-box;
    }

    .fss {
      display: flex;
    }

    .fsc {
      display: flex;
      align-items: center;
    }

    .fcc {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .fsbc {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .fsec {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }

    .row1 .list {
      height: 100%;
    }

    .list .item .name {
      font-size: 18px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: LEFT;
      color: #d6e2ff;
      line-height: 22px;
    }

    .list .item .val {
      font-size: 28px;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: 700;
      text-align: CENTER;
      color: #3fb6ff;
      line-height: 32px;
      margin-top: 6px;
    }

    .list .item .val.m_red {
      color: #fc5959;
    }

    .scrollbar::-webkit-scrollbar {
      width: 10px;
      background: transparent;
    }

    .scrollbar::-webkit-scrollbar-thumb {
      width: 10px;
      background: #3fb6ff;
      border-radius: 5px;
    }

    .mask {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 50;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .mask .block {
      width: 80vw;
      /* background: rgba(2,12,37,0.80); */
      background: radial-gradient(#051b3b, rgba(5, 27, 59, 0.66));
      border: 1px solid rgba(1, 187, 255, 0.76);
      /* border-image: linear-gradient(90deg, rgba(1,187,255,0.76) 0%, rgba(15,245,248,0.16) 100%, rgba(1,187,255,0.08) 100%) 2 2; */
      border-radius: 5px;
      padding: 10px 24px;
      background: #0a1a38;
      color: #d6e2ff;
      border: none;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .mask ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      /* background: #073861; */
    }

    .mask ::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: rgba(4, 123, 180, 1);
    }

    .mask ::-webkit-scrollbar-track {
      border-radius: 0;
      background: rgba(7, 56, 97, 1);
    }

    .mt10 {
      margin-top: 10px;
    }

    .content-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-right: 28px;
    }

    .content-item div {
      color: #fff;
    }

    .content-time {
      width: 240px;
    }

    .title-select {
      height: 40px;
    }

    .title-select ::v-deep .ant-select-selection {
      background-color: rgba(7, 47, 88, 1);
      color: #fff;
      border: 1px solid rgba(1, 186, 255, 0.8);
    }

    .title-select ::v-deep .ant-select-arrow {
      color: rgba(214, 226, 255, 1);
    }

    ::v-deep .content-table {
      margin: 18px auto;
      border-top: 1px solid rgba(32, 165, 247, 0.3);
      color: rgba(214, 226, 255, 1);
      text-align: center;
    }

    .table-title {
      text-align: center;
      letter-spacing: 1px;
      font-size: 24px;
      margin: 24px auto 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #fff;
    }

    .tablt-date {
      font-size: 14px;
      margin-bottom: 24px;
      text-align: center;
      color: #fff;
    }

    ::v-deep .ant-table-pagination.ant-pagination {
      margin: 10px;
    }

    .echart-box {
      height: 200px;
      padding: 0 34px;
    }

    .echart-box .echart-box-item {
      /* border: 1px solid rgba(4, 74, 116, 1); */
      padding: 8px 0 8px 34px;
    }

    ::v-deep .ant-table-footer {
      padding: 0;
      background: #0a1a38;
      border-top: 1px solid #003e63 !important;
    }

    ::v-deep .ant-table-footer::before {
      background: none;
    }

    .ant-table-header::-webkit-scrollbar {
      display: none;
      border: none;
    }

    .ant-table-footer .ant-table-body::-webkit-scrollbar {
      display: none;
      border: none;
    }

    .demo-infinite-container.modal-table {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .ant-calendar-picker-input.ant-input, .ant-select-selection.ant-select-selection--single {
      background: rgba(1, 186, 255, 0.2);
      border: 1px solid #01baff;
      color: #fff;
    }

    .ant-select-selection.ant-select-selection--single svg {
      color: #fff;
    }

    .ant-table-header.ant-table-hide-scrollbar {
      overflow: hidden !important;
    }

    .ant-table-header {
      margin-bottom: -17px;
      padding-bottom: 17px !important;
      background: transparent;
    }

    .ant-table-thead {
      border: 1px solid #003e63;
    }

    .ant-table-thead > tr > th {
      box-sizing: border-box;
      height: 40px;
      padding: 0 16px !important;
      background: transparent !important;
      color: #fff;
      border-bottom: 1px solid #003e63;
    }

    .ant-table-scroll {
      border-right: 1px solid #003e63;
    }

    .ant-table {
      color: #fff;
    }

    .ant-table-fixed-header {
      > .ant-table-content, > .ant-table-scroll, > .ant-table-body {
        background: transparent;
      }

      .ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td {
        border-right: 1px solid #003e63;
      }

      .ant-table-tbody > tr > td {
        border-bottom: 1px solid #003e63;
      }

      .ant-table-tbody > tr:hover > td {
        background: none !important;
      }

      .ant-table-bordered .ant-table-header > table, .ant-table-bordered .ant-table-body > table, .ant-table-bordered .ant-table-fixed-left table, .ant-table-bordered .ant-table-fixed-right table {
        border: 1px solid #003e63;
      }

      /* .ant-table-thead .ant-table-row-cell-break-word:first-child{
        padding: 9.5px 0 9.5px 8px;
      }
      .ant-table-thead > tr:first-child > th:first-child {
        border-top-left-radius: 4px;
      } */
      .ant-pagination-total-text {
        color: #fff;
      }

      ::v-deep .ant-input {
        background: rgba(1, 186, 255, 0.2);
        border: 1px solid #01baff;
      }
    }
  }

  .timer {
    font-size: 20px !important;
  }

  .head-name {
    font-family: 'Microsoft YaHei' !important;
  }
</style>